<template>
  <div class="header">
    <section class="banxin">
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <div class="right">
        <ul @click="showToastFn">
          <li class="avatar_li">
            <img class="avatar" src="../assets/images/userImg.png" width="26px" alt="" />
            用户名: {{userInfo.nickName}}
          </li>
          <li>我的鸡腿: {{userInfo.coin}}</li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
        </ul>
        <div class="shopping" v-if="$store.state.isLogined">
          <img :src="userInfo.headImg" width="28px" height="28px" style="border-radius:15px" alt="" />
          <span>购物车</span>
          <b>{{cartTotal}}</b>
        </div>
        <button @click="showLogin" v-else>登录</button>
      </div>
    </section>
  </div>
</template>

<script>
import {UserProfilesApi,WeixinLoginApi} from '../request/api'
export default {
  data() {
      return {
        isLogined: false,
        cartTotal:0,
        userInfo:{
          headImg:require("../assets/images/Shopping.png"),
          nickName:"--",
          coin:"--"
        }
      }
    },
  methods: {
    
    showLogin() {
      //调用显示模块
      this.$store.commit('showModalFn')
    },
    showToastFn(){
      //显示toast
      this.$store.dispatch('changeToastAsync',{
        msg:'请先登录',
        type:'info'
      })}
},
created(){
  //地址栏中有code后在发起请求
  let myToken = this.$route.query.code
  if(myToken){
    WeixinLoginApi({
    code:this.$route.query.code
  }).then(res=>{
    if(res.code === 0){
      localStorage.setItem('x-auth-token',res["x-auth-token"])
      this.$store.dispatch('changeToastAsync',{
        msg:'登录成功',
        type:'success'
      })
      //显示购物车模块
      this.$store.commit('changeIsLogined')
      //利用重定向到当前页面，清除地址栏的code
      this.$router.push(this.$route.path)
      setTimeout(() => {
        this.$router.go(0)//刷新当前页
      }, 2000);
    } else{
       this.$store.dispatch('changeToastAsync',{
        msg:'登录失败，请重试',
        type:'danger'
      })
    }
  })
  } else {
    //获取token
    let getToken = localStorage.getItem('x-auth-token')
    //显示登录按钮或购物车
      this.$store.commit('changeIsLogined')
      //如果有token就会发送请求获取用户数据
      if( getToken){
        UserProfilesApi().then(res=>{
         if(res.code === 0){
           
            let {cartTotal,userInfo} = res.data
            this.cartTotal = cartTotal
            this.userInfo = userInfo
            conosle.log(userInfo)
            // json.stringify()用于将JavaScript对象或值转换为JSON字符串
            let myUserInfo = JSON.stringify(userInfo)
            //将userInfo 存储在localStroage中
            localStorage.setItem('userInfo',myUserInfo)
}
        })
      }
    
  }
  
}
}
</script>

<style lang="less" scoped>
@import '../totao.css';
.header {
  width: 100%;
  height: 40px;
  background: #242839;
  color: #fffefe;
  section {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      display: flex;
      ul {
        display: flex;
        align-items: center;
        li {
          margin-right: 20px;
          cursor: pointer;
          &.avatar_li {
            display: flex;
            align-items: center;
          }
          .avatar {
            border-radius: 50%;
            margin: 5px;
          }
        }
      }
      button {
        width: 124px;
        height: 40px;
        background: #0a328e;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        color: #fffefe;
      }
      .shopping {
        width: 124px;
        height: 40px;
        background: #0a328e;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-left: 8px;
          margin-right: 6px;
        }
        b {
          height: 22px;
          width: 22px;
          background: #fd604d;
          border-radius: 10px;
          text-align: center;
          line-height: 22px;
        }
      }
    }
  }
}

</style>